<!--
 * @Author: Qimu
 * @Date: 2020-06-26 01:38:18
 * @LastEditors: Qimu
 * @LastEditTime: 2020-07-12 14:46:59
 * @Description: file content
 * @FilePath: \vue-admin-koa2\vue-admin\src\views\Article\ArticleDetail.vue
--> 
<template>
  <div class="article">
    <!-- 内容区域 start-->
    <el-card class="box-card">
      <!-- 文章详情区域 start-->
      <div>
        <h1>{{articleDetail.article_title}}</h1>
        <p>{{articleDetail.article_summary}}</p>
        <p>{{articleDetail.article_category}}</p>
        <p>{{articleDetail.article_createTime}}</p>
        <div class="ql-snow">
          <div class="hljs" v-html="articleDetail.article_content"></div>
        </div>
      </div>
      <!-- 文章详情区域 end-->
    </el-card>
    <!-- 内容区域 end-->
  </div>
</template>

<script>
import 'quill/dist/quill.snow.css'
import 'highlight.js/styles/vs2015.css'

import { mapGetters } from 'vuex'

export default {
  components: {},
  data() {
    return {
      articleDetail: {}
    }
  },
  created() {
    this.getArticleDetail()
  },
  computed: {
    // ...mapGetters(['articleCategoryList'])
  },
  methods: {
    //文章详情
    async getArticleDetail() {
      const { data: res } = await this.$api.article.articleDetail({
        _id: this.$route.params.articleId //文章ID
      })
      console.log('res', res)
      if (res.meta.status !== 200) {
        this.$message.error({ message: res.meta.message }) //获取文章详情失败
      } else {
        // this.$store.dispatch('getadminList')
        this.articleDetail = res.data
      }
    }
  }
}
</script>
<style lang="sass">
.aaa
  background-color: #282C34
</style>